<template>
  <el-form ref="formdata" :inline="true" :model="formdata" class="demo-form-inline mygameform">
    <el-form-item label="日期区间" >
      <el-date-picker
        v-model="formdata.date"
        type="daterange"
        align="right"
        value-format="yyyy-MM-dd"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>

    </el-form-item>
    <el-form-item label="渠道">
      <el-select v-model="formdata.channel"
                 filterable
                 remote
                 clearable
                 reserve-keyword
                 placeholder="请输入关键词"
                 :remote-method="remoteMethod"
                 :loading="loading">
        <el-option
          v-for="item in options"
          :key="item.channel"
          :label="item.channel+'-'+item.name"
          :value="item.channel">
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
          <span style="float: left">{{ item.channel }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {mapState,mapGetters} from 'vuex';
    export default {
      name: "game-qry-param",
      data() {
        return {
          options: [],
          loading: false,
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);

              }
            }, {
              text: '最近两个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          formdata: {}
        }
      },
      computed:{
        ...mapState( {
          channelList: state => state.app.channelList,
        })
      },
      mounted() {
      },
      methods:{
        query:function () {
            let param = this.formdata;
            const now = new Date();
            let edate = param.date?param.date[1] : now.Format("yyyy-MM-dd");
            let sdate = param.date?param.date[0] :new Date(now.getFullYear(),now.getMonth(),1).Format("yyyy-MM-dd");

            let p = {'startdate':sdate,'enddate':edate};
            if(param.channel){
              p.channel = param.channel;
            }
            this.$emit('queryForm',p);
          },
        remoteMethod(query) {
          if (query !== '') {
            this.loading = true;
            setTimeout(() => {
              this.loading = false;
              this.options = this.channelList.filter(item => {
                return item.name.toLowerCase()
                  .indexOf(query.toLowerCase()) > -1||item.channel.toLowerCase()
                  .indexOf(query.toLowerCase()) > -1;
              });
            }, 200);
          } else {
            this.options = [];
          }
        }

      }
    }
</script>

<style>
.mygameform{
  margin-top: 10px;
}
</style>
